<template>
  <!-- header部分 -->
    <header>
        <p>登陆</p>
    </header>
  <!-- 表单部分 -->
    <ul class="form-box">

        <li>
            <div class="title">
                手机号码：
            </div>
            <div class="content">
                <input type="text" v-model="loginData.phone" placeholder="手机号码">
            </div>
        </li>
        <li>
            <div class="title">
                密码：
            </div>
            <div class="content">
                <input type="password" v-model="loginData.pwd" placeholder="密码">
            </div>
        </li>
    </ul>
    <div class="button-login">
        <button @click="login('business')">商家登陆</button>
        <br>
        <button @click="login('customer')">顾客登陆</button>
    </div>
    <div class="button-register">
        <button @click="router.push('/register')">注册</button>
    </div>
</template>

<script setup>
import {ref} from "vue"
import {loginAPI} from "../api/api.js";
import {setSessionStorage} from "../common.js";
import router from "../route/route.js";

const loginData =
    {
        phone:"110",
        pwd:"123"
    }

const login = (role)=>{
    const data = new FormData()
    data.append("userPhone",loginData.phone)
    data.append("password",loginData.pwd)
    loginAPI(data).then(res=>{
        if (res.data.code === "200"){
            setSessionStorage("user",res.data.data)
            router.push(`/${role}index`)
        }else {
            alert(res.data.msg)
        }
    }).catch(e=>console.log(e))
}
</script>

<style scoped>
/****************** header部分 ******************/
header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}
/****************** 表单部分 ******************/
.form-box {
    width: 100%;
    margin-top: 12vw;
}
.form-box li {
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
    display: flex;
    align-items: center;
}
.form-box li .title {
    flex: 0 0 18vw;
    font-size: 3vw;
    font-weight: 700;
    color: #666;
}
.form-box li .content {
    flex: 1;
}
.form-box li .content input {
    border: none;
    outline: none;
    width: 100%;
    height: 4vw;
    font-size: 3vw;
}
.button-login {
    width: 100%;
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
}
.button-login button {
    width: 100%;
    height: 10vw;
    font-size: 3.8vw;
    font-weight: 700;
    color: #fff;
    background-color: #38CA73;
    border-radius: 4px;
    border: none;
    outline: none;
}
.button-register {
    width: 100%;
    box-sizing: border-box;
    padding: 4vw 3vw 0 3vw;
}
.button-register button {
    width: 100%;
    height: 10vw;
    font-size: 3.8vw;
    font-weight: 700;
    /*与上面登陆按钮不同的只有颜色、背景色、边框不同*/
    color: #666;
    background-color: #EEE;
    border: solid 1px #DDD;
    border-radius: 4px;
    outline: none;
}


</style>